<!--eslint-disable-->
<template>
    <div class="capacitance">
        <svg t="1689917982045" class="capacitance_svg" viewBox="0 0 1637 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1669" width="50" height="50">
            <path
                d="M 1554.94 586.24 H 976.896 c -16.896 0 -29.696 -11.264 -29.696 -25.6 v -3.584 c 0 -14.336 12.8 -25.6 29.696 -25.6 h 578.048 c 16.896 0 29.696 11.264 29.696 25.6 v 3.584 c 0 14.336 -12.8 25.6 -29.696 25.6 Z M 650.752 586.24 H 71.168 c -16.896 0 -30.208 -11.264 -30.208 -25.6 v -3.584 c 0 -14.336 12.8 -25.6 30.208 -25.6 h 580.608 c 16.896 0 30.208 11.264 30.208 25.6 v 3.584 c -0.512 13.824 -14.336 25.6 -31.232 25.6 Z"
                :fill="element.style.backgroundColor" p-id="1670"></path>
            <path
                d="M 654.848 861.696 c -14.848 0 -27.136 -12.288 -27.136 -27.136 V 293.376 c 0 -14.848 12.288 -27.136 27.136 -27.136 s 27.136 12.288 27.136 27.136 V 834.56 c 0 14.848 -12.288 27.136 -27.136 27.136 Z M 967.168 861.696 c -14.848 0 -27.136 -12.288 -27.136 -27.136 V 293.376 c 0 -14.848 12.288 -27.136 27.136 -27.136 s 27.136 12.288 27.136 27.136 V 834.56 c 0 14.848 -12.288 27.136 -27.136 27.136 Z"
                :fill="element.style.backgroundColor" p-id="1671"></path>
        </svg>
        <v-text :prop-value="element.propValue" :element="element"/>
    </div>
</template>

<script>
import request from '@/utils/request'
import OnEvent from '../../common/OnEvent'

export default {
    extends: OnEvent,
    props: {
        propValue: {
            type: String,
            required: true,
            default: '',
        },
        request: {
            type: Object,
            default: () => {
            },
        },
        element: {
            type: Object,
            default: () => {
            },
        },
    },
    data() {
        return {
            cancelRequest: null,
        }
    },
    created() {
        if (this.request) {
            this.cancelRequest = request(this.request, this.propValue, 'data')
        }
    },
    beforeDestroy() {
        this.request && this.cancelRequest()
    },
}
</script>

<style lang="scss" scoped>
.capacitance {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    outline: 0;
    margin: 0;
    width: 100%;
    height: 100%;

    .capacitance-svg {
        width: 100%;
        height: 100%;
    }

    .v-text {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        width: 50%;
        height: 40%;
    }
}
</style>
